<template>
	<a-modal v-model:visible="visible" width="640px" :title="data.title" body-class="service_dialog_body">
		<a-space direction="vertical" fill :size="16" class="service_content">
			<div class="service_content">
				<h4>基本信息</h4>
				<a-descriptions :data="baseData" :column="2" bordered />
			</div>
			<div class="service_content">
				<h4>相关材料</h4>
				<div class="content">{{ materialData || '暂无材料' }}</div>
			</div>
			<div class="service_content">
				<h4>服务时间</h4>
				<div class="content">{{ timeData || '全时段开放' }}</div>
			</div>
			<div class="service_content">
				<h4>办理指南</h4>
				<div class="content">
					<p>{{ guideData.description }}</p>
					<a-image width="100%" :src="guideData.image" />
				</div>
			</div>
		</a-space>
	</a-modal>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
const visible = defineModel<boolean>();
const props = defineProps({ data: Object as any });
const baseData = computed(() => {
	return [
		{ label: '服务名称', value: '家具类合同预审（试运行）', span: 2 },
		{ label: '服务简称', value: '家具类合同预审（试运行）', span: 2 },
		{ label: '服务对象', value: '教职工' },
		{ label: '办理部门', value: '后勤保障部' },
		{ label: '协作部门', value: props.data.price },
		{ label: '办理方式', value: '线上' },
		{ label: '联系人', value: props.data.price },
		{ label: '联系电话', value: '027-67885175' },
		{ label: '服务办理', value: props.data.price }
	];
});
const materialData = ref<string>('');
const timeData = ref<string>('');
const guideData = ref<any>({
	description: '对校内家具类合同进行线上预审批，需求方提交相关信息，经责任单位审核通过后，用企业微信通知老师前往后勤保障部质量监察科盖章',
	image: 'https://i.cug.edu.cn/data/sys-attach/download/1iv55opl8wc1w1me4dw2439mg43ovo5seow0'
});
</script>
<style lang="scss">
.service_dialog_body {
	max-height: calc(90vh - 200px);
}
</style>
<style lang="scss" scoped>
.service_content {
	h4 {
		line-height: 1;
		font-size: 15px;
		font-weight: bold;
		margin-bottom: 6px;
	}
	.content {
		padding: 8px 12px;
		border: solid 1px var(--color-border-2);
	}
	:deep(.arco-descriptions-item-label) {
		padding: 8px 12px;
	}
	:deep(.arco-descriptions-item-value) {
		padding: 8px 12px;
	}
}
</style>
